<template>
  <form>
    <table>
      <tbody>
        <tr>
          <td>姓名：</td>
          <td>
            <input type="text" v-model="teacher.teacherName" />
          </td>
        </tr>

        <tr>
          <td>年龄：</td>
          <td>
            <input type="text" v-model="teacher.teacherAge" />
          </td>
        </tr>

        <tr>
          <td>性别：</td>
          <td>
            <input type="text" v-model="teacher.teacherSex" />
          </td>
        </tr>

        <tr>
          <td>联系方式：</td>
          <td>
            <input type="text" v-model="teacher.phone" />
          </td>
        </tr>

        <tr>
          <td>教学班级：</td>
          <td>
            <input type="text" v-model="teacher.className" />
          </td>
        </tr>

        <tr id="btn">
          <td colspan="2">
            <input type="reset" value="清空" />
            <input type="button" value="新增" @click="add" />
            <input type="button" value="取消" @click="$router.push('/')" />
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</template>

<style scoped>
table tr td:first-child {
  text-align: right;
}

#btn td {
  text-align: center;
}
</style>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 老师列表
const teachers = ref([])

// 后端api
const api = 'http://localhost:8000/teachers'

// 老师对象
const teacher = ref({
  className: '',
  phone: '',
  teacherAge: '',
  teacherName: '',
})

// 添加
function add() {
  for (const key in teacher.value) {
    if (teacher.value[key] === '') {
      return
    }
  }

  // 全部输入框都有内容
  // 新增请求
  axios.post(`${api}`, teacher.value).then((res) => {
    if (res.status === 200) {
      setTimeout(() => {
        location.href = '/'
      }, 100)
    }
  })
}
</script>
